<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>大事件-列表页</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/jquery.pagination.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="js/jquery.pagination.min.js"></script>
  <link rel="stylesheet" href="./js/layui/css/layui.css">
</head>

<body>
  <div class="header">
    <a href="./index.html" class="logo fl"><img src="images/logo.png" alt="logo"></a>
    <div class="search_form fl">
      <input type="text" class="search_txt" placeholder="黑洞照片">
      <button class="search_btn"><i class="fa fa-search"></i></button>
    </div>
    <div class="link_info fr">
      <a href="#"><i class="fa fa-angle-right"></i>&nbsp;&nbsp;网站地图</a><br>
      <a href="#"><i class="fa fa-angle-right"></i>&nbsp;&nbsp;招聘信息</a>
    </div>
  </div>

  <div class="menu_con">
    <div class="menu">
      <div class="menu_collapse fl">
        <a href="javascript:;" class="level_one"><i class="fa fa-list-ul"></i>全部分类</a>
        <ul class="level_two">

        </ul>
      </div>
      <ul class="left_menu fl">

      </ul>
      <ul class="right_menu fr">
        <li><a href="#">科技专题</a></li>
        <li><a href="#">财经专题</a></li>
      </ul>
    </div>
  </div>

  <div class="main_con clearfix">
    <div class="left_con setfr">

      <div class="list_title">
        <h3></h3>
      </div>

    </div>

    <div class="right_con setfl">
      <div class="common_wrap">
        <h3><i class="fa fa-bar-chart"></i> 一周热门排行</h3>
        <ul class="content_list" id="content_list">

        </ul>
      </div>
      <div class="common_wrap">
        <h3><i class="fa fa-commenting-o"></i> 最新评论</h3>
        <ul class="content_list comment_list" id="comment_list">

        </ul>
      </div>
      <div class="common_wrap">
        <h3><i class="fa fa-bullseye"></i> 焦点关注</h3>
        <ul class="content_list guanzhu_list" id="guanzhu_list">

        </ul>
      </div>
    </div>
    <div id="test1" style="margin:0 250px;"></div>
  </div>

  <div class="footer clearfix">
    <div class="foot_link">
      <a href="#">关于我们</a>
      <span>|</span>
      <a href="#">联系我们</a>
      <span>|</span>
      <a href="#">招聘人才</a>
      <span>|</span>
      <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2019 深圳大事件信息技术股份有限公司 All Rights Reserved</p>
    <p>电话：0755-****888 粤ICP备*******8号</p>
  </div>
  <!-- 导包template -->
  <script src="./js/template-web.js"></script>
  <script src="./js/http.js"></script>
  <script src="./js/layui/layui.js"></script>

</body>

<!--  一周热门排行 模板 -->
<script id="ranking" type="text/html">
  {{each data}}
    <li>
      {{if $index==0}}
      <span class="first">1</span>
      {{else if $index==1}}
      <span class="second">2</span>
      {{else if $index==2}}
      <span class="third">3</span>
      {{else}}
      <span>{{$index+1}}</span>
      {{/if}}
      <a href="./article.html?id={{$value.id}}">{{$value.title}}</a>
    </li>
  {{/each}}
 </script>


<!--  最新评论 模板 -->
<script id="comments" type="text/html">
  {{each data}}
  <li>
    <span>{{$value.author.substr(0,1)}}</span>
    <b><em>{{$value.author}}</em>{{$value.date}} {{$value.time}}说:</b>
    <strong>{{$value.intro}}</strong>
  </li>
  {{/each}}
 </script>


<!-- 焦点关注 模板-->
<script id="focus" type="text/html">
  {{each data}}
  <li><a href="javascript:void(0)">{{$value.intro}}</a></li>
  {{/each}}
 </script>


<!--搜索信息 模板-->
<script id="sous" type="text/html">
  {{each data.data}}
  <div class="common_news_list">
    <a href="./article.html?id={{$value.id}}" class="list_pic"><img src="{{$value.cover}}" alt=""></a>
    <h4><a href="./article.html?id={{$value.id}}">{{$value.title}}</a></h4>
    <p>
      {{@ $value.content}}
    </p>
    <div class="new_info">
      <span>标签：{{$value.category}}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<i class="fa fa-eye"></i>&nbsp;阅读({{$value.read}}
        )&nbsp;&nbsp;&nbsp;<i class="fa fa-commenting"></i>&nbsp;评论( {{$value.comments}} )</span>
      <b>发布于 {{$value.date}}</b>
    </div>
  </div>
  {{/each}}

 </script>


<!--导航栏  模板-->
<script id="navigation" type="text/html">
  {{each data}}
  <li><a href="./list.html?id={{$value.id}}">{{$value.name}}</a></li>
  {{/each}}
 </script>


<script>
  $(function () {
    get_r();
    get_p();
    get_j();
    get_d();
    shuju();
  });
  function fy(pages, curr) {
    layui.use('laypage', function () {
      var laypage = layui.laypage;

      //执行一个laypage实例
      laypage.render({
        elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
        , count: pages //数据总数，从服务端得到
        , limit: 6
        , curr: curr
        , jump: function (obj, first) {
          //首次不执行
          if (!first) {
            shuju(obj.curr, obj.limit);
          }
        }
      });
    });
  }

  // 搜索信息
  $('.search_btn').click(function () {
    let ss = $('.search_txt').val().trim();
    if (ss == '') {
      alert('搜索不能为空');
      return;
    }

    window.location.href = `./list.html?search=${ss}`
  });

  function shuju(curr, limit) {
    let content = window.location.search
    let value1 = content.split('=')[0];
    let value2 = content.split('=')[1];
    let page = curr;
    let perpage = limit;
    let arr = {
      type: value2,
      page: page,
      perpage: perpage
    }
    // console.log(content, value1, value2);
    if (content == '') {
      window.location.href = './index.html';
    } else if (value1 == '?id') {
      myAjax('get', '/index/search', arr, function (resData) {
        if (resData.code == 200 && resData.data.data.length > 0) {
          let sousuo = template('sous', resData);
          $('div.left_con.setfr').html(`<div class="list_title"><h3>${resData.data.data[0].category}</h3></div>` + sousuo);
        } else {
          $('div.left_con.setfr').html(`<div class="list_title"><h3>没有数据</h3></div>`);
        }
        fy(resData.data.totalCount, curr);
      });
    } else {
      let value3 = decodeURI(value2);
      let arrjob = {
        key: value3,
        page: page,
        perpage: perpage
      }
      myAjax('get', '/index/search', arrjob, function (resData) {
        let sousuo = template('sous', resData);
        $('div.left_con.setfr').html(`<div class="list_title"><h3>${value3}</h3></div>` + sousuo);
        fy(resData.data.totalCount, curr);
      });
    }
  }


  // 一周热门排行
  function get_r() {
    myAjax('get', '/index/rank', null, function (resData) {
      let re = template('ranking', resData);
      $('#content_list').html(re);
    });
  }

  // 最新评论
  function get_p() {
    myAjax('get', '/index/latest_comment', null, function (resData) {
      let pl = template('comments', resData);
      $('#comment_list').html(pl);
    });
  }

  // 焦点关注
  function get_j() {
    myAjax('get', '/index/attention', null, function (resData) {
      let jd = template('focus', resData);
      $('#guanzhu_list').html(jd);
    });
  }

  // 导航栏
  function get_d() {
    myAjax('get', '/index/category', null, function (resData) {
      let xll = template('navigation', resData);
      $('.level_two').html(`<li class="up"></li>${xll}`);
      $('.left_menu').html(xll);
    });

  }





</script>

</html>